<template>
  <v-layout type="main">
    <el-form class="form" ref="form" :model="addForm" :rules="submitRules" label-width="124px">
      <el-form-item label="名称" prop="name">
        <el-input type="text" v-model="addForm.name" />
      </el-form-item>
      <el-form-item label="框架" prop="desc">
        <el-select class="short-input" clearable v-model="addForm.engine" placeholder="请选择">
          <el-option label="pytorch" :value="2"></el-option>
          <el-option label="tensorflow" :value="1"></el-option>
          <el-option label="其他" :value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="类型" prop="desc">
        <el-select class="short-input" clearable v-model="addForm.type" placeholder="请选择">
          <el-option label="训练" :value="1"></el-option>
          <el-option label="推理" :value="2"></el-option>
          <el-option label="评估" :value="3"></el-option>
          <el-option label="测试" :value="4"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="镜像地址" prop="url">
        <el-input type="text" v-model="addForm.url" />
      </el-form-item>
      <div v-if="addForm.type == 2">
        <el-form-item label="命令行" prop="command">
          <el-input type="text" v-model="addForm.command" />
        </el-form-item>
        <el-form-item label="端口" prop="port">
          <el-input type="port" v-model="addForm.port" />
        </el-form-item>
      </div>
      <el-form-item label=" ">
        <el-button class="none-type" @click="submit">确定</el-button>
      </el-form-item>
    </el-form>
  </v-layout>
</template>

<script>
import { addImage, putImage, getImageDetail } from '@/api/image'
export default {
  data() {
    return {
      addForm: {
        visibility: 2,
        engine: 0,
        type: 1
      },
      submitRules: {
        username: [
          { required: true, message: "请填写名称" },
        ],
        url: [
          { required: true, message: "请填写镜像地址" },
        ],
        command: [
          { required: true, message: "请填写启动命令行" },
        ],
        port: [
          { required: true, message: "请填写port" },
        ],
      }

    };
  },
  async created() {
    this.getData()
  },
  mounted() {

  },
  destroyed() {

  },
  methods: {
    async getData() {
      if (this.$route.query.id) {
        let res = await getImageDetail({ id: this.$route.query.id })
        this.addForm = res.data
      }
    },
    async submit() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          if (this.$route.query.id) {
            await putImage({ ...this.addForm })
          } else {
            await addImage({ ...this.addForm })
          }
          this.$router.push({
            path: '/image'
          })
        }
      })
    }
  }
}
</script>
<style lang="less" scoped></style>